import { useState, useEffect } from "react";
import "./index.less";
import MeauBox from "../components/MeauBox";

function MessageItem({data}: any) {
  const { item, index } = data;
  const { source } = item;

  const cssBySource = source === 'message' ? 'isMessage' : 'isReply';

  const timeValue = +item.duration >= 60 ? 60 : +item.duration;
  const contentLength = 8 + ( timeValue - 1 ) / 59 * 10;
  const contentWidth = {
    width: `${contentLength}vw`
  };

  const [isShowMessageMeau, setIsShowMessageMeau] = useState(false);

  const handleRightClick = (event: any) => {
    event.preventDefault();
    const flag = !isShowMessageMeau;
    setIsShowMessageMeau(flag);
  };

  return (
    <div className={`voice-item ${ cssBySource }`}>
      <img className="message-avatar" src={ item.avatar } alt="" />
      <div className="voice-item-content text-style" style={ contentWidth } onContextMenu={ handleRightClick }>
        <MeauBox isShowBox={ isShowMessageMeau } data={ data } />
        <div className="message-triangle"></div>
        <img className="voice-item-icon" src='/assets/icon/xiaoxi_yuyin_ziji@2x.png' alt="" />
        <span className="voice-item-duration text-style">{ item.duration }"</span>
      </div>
    </div>
  );
}

export default MessageItem;
